import React, { Component } from "react";
import yhTools from "@/tools/yh";
// 组件
import MainLayout from "@component/mainLayout/mainLayout";
import AgreeCheckbox from "@component/agreeCheckbox/index";
import Button from "@component/button/index";
import PaySmsModal from "../components/paySmsModal";
import xhb_option1 from '@images/imageXHB/icon_01@2x.png';
import xhb_option2 from '@images/imageXHB/icon_02@2x.png';
import xhb_option3 from '@images/imageXHB/icon_03@2x.png';

import "./noSign.scss";
import { Toast } from "antd-mobile";

/**
 * 描述：小辉宝-余额-已开户未签约
 * 作者：zenghq
 * 日期：2021-03-10
 */
class noSign extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isRead: false,
			payIsVisible: false // 是否显示开通支付弹窗
		};
	}
	/*******************生命周期 start************************/
	componentDidMount() { }
	componentWillUnmount() { }
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	toggleAgree(e) {
		if (e) {
			e.stopPropagation();
		}
		this.setState(prevState => {
			return { isRead: !prevState.isRead };
		});
	}
	/**关闭签约 */
	closePayModal = () => {
		this.setState({
			payIsVisible: false
		});
	};
	/**立即开通 */
	openClick = () => {
		const { isRead } = this.state;
		if (!isRead) {
			return Toast.info("请先勾选协议");
		}
		this.setState({
			payIsVisible: true
		});
	};
	// 用户协议
	onGoAgreement = () => {
		this.props.history.push({
			pathname: "/HTPayServiceAgreement"
		});
	};

	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const _pageParams = {
			header: {
				title: "支付签约",
				headerBackground: '#BC9A67',
				goBackAction: () => {
					if (this.props.location.params && this.props.location.params.from) {
						this.props.history.push('/xhbBalanceAccountOpened');
					} else {
						this.props.history.goBack();
					}
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const { isRead, payIsVisible } = this.state;
		const { history } = this.props;
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="ballance_no_sign-content">
					{/* 顶部 */}
					<section className="no_sign-top-box">
						<div className="sign-banner">
							<img src={require('@images/imageXHB/sign-banner.png')} alt="" />
							<span className="tag">限时</span>
						</div>
						<div className="options">
							<div className="item">
								<img src={xhb_option1} alt="" />
								<span className="item-a">零钱打理</span>
								<span className="item-c">收益享不停</span>
							</div>
							<div className="item">
								<img src={xhb_option2} alt="" />
								<span className="item-a">随时可用</span>
								<span className="item-c">能花又能取</span>
							</div>
							<div className="item">
								<img src={xhb_option3} alt="" />
								<span className="item-a">银行账户</span>
								<span className="item-c">安全有保障</span>
							</div>
						</div>
					</section>
					<div className="agree-wrapper mt36 ml30">
						<AgreeCheckbox
							checked={isRead}
							onChange={this.toggleAgree.bind(this)}
							isXhb={true}
						>
							{
								<span className="multi-line">
									<a onClick={this.toggleAgree.bind(this)}>阅读并同意</a>
									<a onClick={this.onGoAgreement} className="font-link">
										《支付服务协议》
									</a>
								</span>
							}
						</AgreeCheckbox>
					</div>
					<div className="footer-box">
						<Button
							onClick={this.openClick}
							className="button"
							btnClassName="balance-button"
							buttonStyle={{
								background: 'linear-gradient(90deg, #E0B174 0%, #C89553 100%)'
							}}
						>
							确认并签约
						</Button>
					</div>
					{/* 支付签约 */}
					<PaySmsModal
						closeClick={this.closePayModal}
						history={history}
						modProps={{ visible: payIsVisible }}
					></PaySmsModal>
				</div>
			</MainLayout>
		);
	}
}

export default noSign;
